<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const props = defineProps({
  nickname: { type: String, default: '' },
  rid: { type: String, default: '' },
  pos: { type: [Number, String], default: null },
  duration: { type: Number, default: 30 },
})

const emit = defineEmits(['accept', 'reject', 'close'])

const countdown = ref(props.duration)
let timerId = null

function startTimer() {
  clearTimer()
  countdown.value = props.duration
  timerId = setInterval(() => {
    if (countdown.value > 0) countdown.value -= 1
    if (countdown.value <= 0) {
      emit('close')
      clearTimer()
    }
  }, 1000)
}

function clearTimer() {
  if (timerId) {
    clearInterval(timerId)
    timerId = null
  }
}

function onAccept() {
  emit('accept')
  clearTimer()
}
function onReject() {
  emit('reject')
  clearTimer()
}

onMounted(startTimer)
onBeforeUnmount(clearTimer)
</script>

<template>
  <div class="invite-toast">
    <div class="toast-countdown">{{ countdown }}s</div>
    <div class="toast-title">邀请加入房间</div>
    <div class="toast-body">你的朋友 {{ nickname }} 邀请您加入房间。</div>
    <div class="toast-info">房间号：{{ rid }}，位置：{{ pos }}</div>
    <div class="toast-actions">
      <button class="btn primary" @click="onAccept">同意</button>
      <button class="btn" @click="onReject">拒绝</button>
    </div>
  </div>
</template>

<style scoped>
.invite-toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 320px;
  background: #f66;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 1000;
  animation: slide-in 280ms ease-out both;
}
.toast-countdown {
  position: absolute;
  top: 8px;
  right: 10px;
  font-weight: 700;
  color: #fff;
}
@keyframes slide-in {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.toast-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: #fff; }
.toast-body { margin-bottom: 4px; color: #fff; }
.toast-info { color: #ffe; font-size: 12px; margin-bottom: 8px; }
.toast-actions { display: flex; gap: 8px; justify-content: flex-end; }
.btn { padding: 6px 10px; border: none; border-radius: 8px; background: #eee; cursor: pointer; }
.btn.primary { background: #1677ff; color: #fff; }
</style>


